<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link id="link" href="reset.css" rel="stylesheet" type="text/css" title="Default Style">
    <!-- <link id="link" href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy"> -->


</head>
<!-- onclick="onclickHan(this)" -->

<body>
    <div class="kg">
        <input type="checkbox" id="radio" class="check" name="switch">
        <label for="radio" class="radio">
    </div>
    <p>hello world,this is my first</p>
    <ol>
        <li>ni</li>
        <li>li</li>
        <li>ying</li>
    </ol>
    <ul>
        <li>zhao</li>
        <li>zhao</li>
        <li>zhao</li>
        <li>zhao</li>
        <li>zhao</li>
        <img src="..\img\img\02.jpg" alt="赵丽颖" height="500" width="1000">
        <a href="https://www.baidu.com" target="_top">baidu </a>
        <a href="https://www.baidu.com" target="_parent">baidu </a>
    </ul>
    <p>
        <button data-theme="Default Style">pink</button>
        <button id="kk" data-theme="Fancy">blue</button>
        <button id='21'>ff</button>

    </p>

    <script>
        var b = document.getElementById("kk");
        b.addEventListener("click", () => {
            console.log("按钮1被点击了.");
            document.body.style.setProperty('--themeColor', 'rgb(51, 51, 51)');

        });
        var b = document.getElementById("21");
        b.addEventListener("click", () => {
            console.log("按钮2被点击了.");
            document.body.style.setProperty('--themeColor', 'rgb(33, 183, 183)');

        });

        var b = document.getElementById("radio");
        // function $(id) { return document.getElementById(id) };
        b.addEventListener("click", () => {
            if (b.checked) {
                console.log('选中')
                document.body.style.setProperty('--themeColor', 'rgb(51, 51, 51)');
            } else {
                console.log('没选中')
                document.body.style.setProperty('--themeColor', 'rgb(33, 183, 183)');
            }

            // }
            //     if ($('radio').checked) {
            //         console.log('选中');
            //         document.body.style.setProperty('--themeColor', 'rgb(51, 51, 51)');

            //     } else {
            //         console.log('没选中');
            //         document.body.style.setProperty('--themeColor', 'rgb(33, 183, 183)');

            //     }
        });

        // function onclickHan(obj) {

        //     if ($('radio').checked) {
        //         console.log('选中');
        //         document.body.style.setProperty('--themeColor', 'rgb(51, 51, 51)');

        //     } else {
        //         console.log('没选中');
        //         document.body.style.setProperty('--themeColor', 'rgb(33, 183, 183)');

        //     }
            // if (obj.checked) {
            //     console.log('xuanzhong')
            //     document.body.style.setProperty('--themeColor', 'rgb(51, 51, 51)');
            // } else {
            //     document.body.style.setProperty('--themeColor', 'rgb(33, 183, 183)');

            // }
        // }

    </script>

</body>

</html>